<template>
	<view class="CommentItem" :class="[ isDeleted ? 'deleted' : '' ]" >
	<!-- {{item}} -->
		
		<view class="AvatarArea">
			<!-- <image class="AvatarImage" :src="UserObj.AvatarUrl" mode="aspectFit" style="width: 70rpx;"></image> -->
			<view class="AvatarImage" :style="{ backgroundImage: 'url(' + UserObj.AvatarUrl + ')' }"></view>
		</view>
		<view class="CommentArea">
<!-- 			<view class="debug">
				comment obj: {{CommentObj}}
				user obj: {{UserObj}}
			</view> -->
			<view class="moreButton" @click="onClickMoreButton" > <uni-icons type="more-filled" size="30"></uni-icons> </view>
			<view :class="['moreMenu', isMenuHide ? 'hide' : '' ]">
				<view class="row" @click="onClickDelete" :v-if="isSelfComment"> <uni-icons type="trash" size="30"></uni-icons> 删除 </view>
				<view class="row" @click="onClickCopy"> <uni-icons type="wallet-filled" size="30"></uni-icons> 复制 </view>
			</view>
			<view class="Username"> <h3> {{ UserObj.name }} </h3> </view>
			<view class="CommentTime"> <p> {{ formatDateToChinese( CommentObj.message_time ) }} </p>  </view>
			<view class="CommentContent"> {{ CommentObj.message_content }} </view>
		</view>
		

	</view>
	
</template>

<script setup>
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	import { formatDateToChinese, timeAgo } from "@/utils/string.js";
	import { BASE_URL, request } from "@/utils/request.js";
	import { ref } from "vue";
	
	// console.log(timeAgo("2024-06-29T10:00:00")); // 根据当前时间会输出相应的描述
	
	const props = defineProps( {
		CommentObj:{
			type: Object,
			default: { message_content: "[error]评论内容未加载", message_time: "[error]评论时间未加载" }
		},
		UserObj:{
			type: Object,
			default:{ AvatarUrl: "../../static/defaultAvatar.jpg", name: "[error]用户名未加载" }
		},
		dy:{
			type: Number,
			default: 0
		}
	} );
	
	const isMenuHide = ref(true);
	const isDeleted = ref(false);
	const isSelfComment = ref(false);
	
	const onClickMoreButton = ()=>{
		console.log("on click more button");
		// console.log("------props in this item: -----");
		// console.log(props);
		// console.log("-------global data-------");
		// console.log(getApp().globalData);
		
		/*
		globalData: {
		    UserInfoFromServer: ref( {name: "请登录", avatarUrl: "../../static/defaultAvatar.jpg"} ),
			isLoggedIn: ref(Boolean(false))
		},
		*/
		console.log("-------user info and comment_user_id-------");
		console.log( getApp().globalData.isLoggedIn.value );
		console.log( getApp().globalData.UserInfoFromServer.value.open_id  );
		console.log( props.CommentObj.user_open_id );
		console.log("-------------------------------------------");
		
		isMenuHide.value = !isMenuHide.value;

		//如果已经登录，并且getApp().globalData.UserInfoFromServer这个ref对象有openid字段，并且这个字段和这个评论的user_open_id字段相同，
		//那么就认为是自己发的
		if ( getApp().globalData.isLoggedIn.value 
		&& getApp().globalData.UserInfoFromServer.value.open_id 
		&& getApp().globalData.UserInfoFromServer.value.open_id == props.CommentObj.user_open_id )
			isSelfComment.value = true;
		else 
			isSelfComment.value = false;

		// console.log("is self comment ref var value = "); console.log(isSelfComment.value);
	}
	
	const onClickDelete = ()=>{
		// if ( !props.CommentObj.id ){
		// 	throw("id field not exist");
		// } else {
		// 	console.log(props.CommentObj.id);
		// }
		request({
			url: `message/${props.CommentObj.id}`,
			method: 'DELETE'
		})
		.then(()=>{
			uni.showToast({
				title: "删除成功",
				icon: "success"
			})
			isDeleted.value = true;
		})
		.catch( err=>{
			uni.showToast({
				title: "删除失败" + err,
				icon:"error"
			})
		})
	}
	
	const onClickCopy = ()=>{
		uni.setClipboardData({
			data: String("评论内容: " + props.CommentObj.message_content + "| 评论时间:" + props.CommentObj.message_time),
			success: function () {
				console.log('success');
			}
		});
	}
	onLoad(()=>{

	   

	})
</script>

<style lang="scss" scoped>
	.CommentItem.deleted{
		display: none;
		opacity: 0;
		height: 0;
		filter: blur(10px);
		transition: 1s;
	}
	
	.CommentItem {
		left: 0; right: 0; margin: auto;
		// border: 1px solid red;
		min-height: 100px;
		width: 700rpx;
		border-bottom: 1px solid gray;
		padding: 10px;
		// min-height: 200rpx;
		display: flex; flex-direction: row;
		transition: 1s;
		
		.AvatarArea{
			// border: 2px solid blue;
			width: 100rpx;
			display: flex; flex-direction: column; align-items: center;
			.AvatarImage{
				// border: 2px solid green;
				border-radius: 100%;
				width: 80rpx; height: 80rpx;
				background-size: contain; /* 保持图片长宽比缩放，展示全部内容 */
				background-position: center; /* 图片居中 */
			}
		}
		
		.CommentArea{
			// border: 2px solid blue;
			width: 650rpx;
			position: relative;
			.moreButton{
				// border: 1px solid red;
				position: absolute; right: 0; top: 0;
				height: 30px; width: 30px;
			}
			.moreMenu.hide{
				height: 0;
				opacity: 0;
				filter: blur(10px);
				z-index: -1;
				transition: 0.5s;
			}
			.moreMenu{
				border: 1px solid rgba(0,0,0,0.5);
				border-radius: 10px;
				background-color: rgba(255,255,255,0.5); backdrop-filter: blur(10px);
				position: absolute; top: 30px; right: 0;
				height: 60px; width: 80px;
				transition: 0.5s;
				display: flex; flex-direction: column; justify-content: center; align-items: center;
				.row:not(:first-child) {
				  border-top: 1px solid gray;
				}
				.row{
					display: flex; flex-direction: row; align-items: center;
				}
			}
			.UserName{
				line-height: 40rpx;
				font-size: 100px;
				font-weight: 800;
			}
			.CommentTime{
				color:gray;
				font-size: 25rpx;
				line-height: 40rpx;
			}
			.CommentContent{
				margin-top: 10px;
			}
		}
	}
	
	.grey-line{
		width: 100%;
		left: 0; right: 0; margin: auto;
		// transform: translateY(10px);
	}

</style>